<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框（Modal）插件事件</title>
    <link rel="stylesheet" href="../../static/admin/css/bootstrap.min.css">
    <script src="../../static/admin/js/jquery.min.js"></script>
    <script src="../../static/admin/js/bootstrap.min.js"></script>
    <!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
    <!--    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
    <!--    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->


</head>
<body>

<h2>模态框（Modal）插件事件</h2>
<!-- 按钮触发模态框 -->
<!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">-->
<!--    开始演示模态框-->
<!--</button>-->
<!-- 模态框（Modal） -->
<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static" data-keyboard="false"
     aria-modal="true"
>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    删除用户
                </h4>
            </div>
            <div class="modal-body text-danger">
                确认删除用户吗?
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-sm-5 text-right">
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            确认
                        </button>
                    </div>
                    <div class="col-sm-offset-1 col-sm-6 text-left">
                        <button type="button" class="btn btn-primary">
                            取消
                        </button>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    function centerModals(model) {
        $(model).each(
            function(i) {
                let $clone = $(this).clone().css('display','block').appendTo('body');
                let top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                top = top > 0 ? top : 0;
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top);
            });
    }

    $(function () {
        let model = $('#myModal');
        model.on('show.bs.modal', centerModals(model));
        model.modal('show')
        $(window).on('resize', centerModals(model));
    });
</script>
<script>
    $(function () { $('#myModal').on('hide.bs.modal', function () {
        alert('嘿，我听说您喜欢模态框...');})
    });
</script>

</body>
</html>